<template>
    <AdminMain>
        <el-form :model="system" ref="form" :rules="rules" label-width="80px" :inline="false">
            <el-form-item label="网站名称">
                <el-input v-model="system.name"></el-input>
            </el-form-item>
            <el-form-item label="网站LOGO">
                <el-upload ref="upload" class="uploader" :show-file-list="false" accept="image/*" :limit="1"
                    :on-exceed="handleExceed" :http-request="handleSubmit" :auto-upload="true">
                    <img v-if="system.logo" :src="system.logo" class="logo-img" />
                    <el-icon v-else class="uploader-icon">
                        <Plus />
                    </el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="备案信息">
                <el-input v-model="system.beian"></el-input>
            </el-form-item>
            <el-form-item label="关键字">
                <el-input v-model="system.keywords"></el-input>
            </el-form-item>
            <el-form-item label="网站开关">
                <el-switch v-model="system.status" :active-value="true" active-text="打开" :inactive-value="false"
                    inactive-text="关闭">
                </el-switch>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">保存</el-button>
            </el-form-item>
        </el-form>
    </AdminMain>
</template>

<script setup lang="ts">
import AdminMain from '@/layout/adminMain.vue'
import { ref, onBeforeMount, reactive } from 'vue'
import { getSystem } from '@/apis/base'
import {
    FormInstance,
    UploadInstance,
    UploadProps,
    UploadRawFile,
    UploadRequestOptions
} from 'element-plus'
import { setSystemInfo, updateSystemLogo } from '@/apis/auth'
import useSystem from '@/store/useSystem'

const system = ref<SystemModel>({
    name: "", logo: "", status: false, beian: "蜀ICP备19027034号-4", id: 1, keywords: ""
})
const upload = ref<UploadInstance>()
const form = ref<FormInstance>()
const rules = reactive({})

async function getSystemInfo() {
    const r = await getSystem()
    system.value = r.data
}
function onSubmit() {
    form.value?.validate(async valid => {
        if (valid) {
            const r = await setSystemInfo(system.value)
            if (r.error_code === 0) {
                // 保存成功
                useSystem().setInfo(r.data)
            }
        }
    })
}
const handleExceed: UploadProps['onExceed'] = async (files) => {
    upload.value?.clearFiles()
    const file = files[0] as UploadRawFile
    const formData = new FormData()
    formData.append("file", file, file.name)
    await handleUpload(formData)
}
async function handleSubmit(option: UploadRequestOptions) {
    const formData = new FormData()
    formData.append(option.filename, option.file, option.file.name)
    await handleUpload(formData)
}
async function handleUpload(formData: FormData) {
    const r = await updateSystemLogo(formData)
    if (r.error_code === 0) {
        system.value.logo = r.data
    }
}

onBeforeMount(() => {
    getSystemInfo()
})
</script>

<style lang="scss" scoped>
.uploader {
    .logo-img {
        height: 60px;
        display: block;
    }

    :deep(.el-upload) {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);

        &:hover {
            border-color: var(--el-color-primary);
        }
    }

    .uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 80px;
        height: 80px;
        text-align: center;
    }
}
</style>